<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<script type="text/javascript">
    function showCart(goods) {
        //alert(goodslist);
        $("#cartModal").modal('show');
        $("#cartTitle").html("我的购物车");
        console.log(goods)
        if (goods == null || goods.length === 0) {
            $("#cart_msg").hide();
            $("#cartBody").html("<h3>目前购物车为空，快去购物吧</h3>");
        } else {
            $("#cart_tab").show();
        }
    }

    function closeMsg() {
        window.location.reload();
    }

    function remCart(baseUrl, trId) {
        $.post(baseUrl + "/goods/remCart.action", JSON.stringify(trId), function (result) {
            if (result.success === true) {
                let tag = trId;
                let elementById = document.getElementById('cart_tbody');
                let children = elementById.children;
                let flag = false;
                for (let i = 0; i < children.length; i++) {
                    if (flag === true)
                        children[i].children[0].innerHTML = (i).toString();
                    if (children[i].id === tag) {
                        flag = true;
                    }
                }
                document.getElementById(trId).remove();
            }
        }, "json");
    }

    function pay(baseUrl) {
        window.location.replace(baseUrl + '/order/confirmOrder.action');
    }

</script>
<%--购物车div--%>
<div class="modal fade" id="cartModal" role="dialog" aria-hidden="true"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">
                    ×
                </button>
                <h4 class="modal-title" id="cartTitle">
                    我的购物车
                </h4>
            </div>
            <form class="form-inline" role="form" action=" " method="post">
                <div class="modal-body" id="cartBody">
                    <div id="cart_msg" style="display:none"></div>

                    <table class="table table-striped" id="cart_tab" style="text-align: left">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>商品图片</th>
                            <th>商品名称</th>
                            <th>商品规格</th>
                            <th>商品单价</th>
                            <th>数量</th>
                            <th>运费</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="cart_tbody">
                        <c:forEach items="${sessionScope.car}" var="s" varStatus="vs">
                            <tr id="${s.trId}">
                                <td>${vs.index+1}</td>
                                <td><img src="${pageContext.request.contextPath}/${s.goodsPic}"
                                         style="width: 40px;height: 30px"></td>
                                <td>${s.goodsName}</td>
                                <td>${s.contentName}</td>
                                <td>${s.goodsDiscount}</td>
                                <td><input type="text" name="goodsSales"
                                           value="${s.sales}" size="5"/></td>
                                <td>${s.goodsPostalfee}</td>
                                <td>${(s.goodsDiscount * s.sales) + s.goodsPostalfee}</td>
                                <td><a href="#"
                                       onclick="remCart('${pageContext.request.contextPath}','${s.trId}')">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>

                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" id="ok" onclick="window.location='${pageContext.request.contextPath}/order/confirmOrder.action'">去结算</button>
                    <button class="btn btn-default" type="button" data-dismiss="modal"
                            onclick="closeMsg()">关闭窗口
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>
